<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}{% endblock %} - 我的博客</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css">
    <style>
    .ai-message .markdown-body {
        background: none;
        font-size: 14px;
        line-height: 1.6;
    }
    .ai-message pre {
        background: #f6f8fa;
        padding: 12px;
        border-radius: 6px;
        overflow-x: auto;
        margin: 8px 0;
    }
    .ai-message code {
        font-family: Consolas, monospace;
        font-size: 13px;
    }
    .ai-message p {
        margin: 8px 0;
    }
    .ai-message ul, .ai-message ol {
        margin: 8px 0;
        padding-left: 20px;
    }
    .ai-message blockquote {
        border-left: 4px solid #dfe2e5;
        padding-left: 16px;
        margin: 8px 0;
        color: #6a737d;
    }
    </style>
</head>
<body>
    {% include 'nav.html' %}
    
    <main class="container mt-4">
        {% for message in get_flashed_messages() %}
            <div class="alert alert-info">{{ message }}</div>
        {% endfor %}
        
        {% block content %}{% endblock %}
    </main>
    
    <footer class="footer mt-5">
        <div class="container text-center">
            <small class="text-muted">&copy; 2024 我的博客</small>
        </div>
    </footer>
    
    <div class="ai-assistant-btn" onclick="toggleAiChat()">
        <i class="fas fa-robot"></i>
    </div>

    <div class="ai-chat-container" style="display: none;">
        <div class="ai-chat-header">
            <span><i class="fas fa-robot"></i> AI助手</span>
            <button class="close-btn" onclick="toggleAiChat()">&times;</button>
        </div>
        <div class="ai-chat-messages" id="aiChatMessages">
            <div class="ai-message">
                <strong>AI:</strong>
                <div class="markdown-body">
                    你好!我是AI助手,有什么我可以帮你的吗?

                    我可以:
                    - 回答问题
                    - 提供建议
                    - 解释概念
                    - 编写代码示例
                    - 分析问题

                    请直接输入你的问题。
                </div>
            </div>
        </div>
        <div class="ai-chat-input">
            <input type="text" id="aiMessageInput" placeholder="输入你的问题..."
                   onkeypress="if(event.keyCode==13)sendAiMessage()">
            <button onclick="sendAiMessage()">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
    <script>
    let isAiThinking = false;

    function toggleAiChat() {
        const container = document.querySelector('.ai-chat-container');
        container.style.display = container.style.display === 'none' ? 'flex' : 'none';
        if (container.style.display === 'flex') {
            document.getElementById('aiMessageInput').focus();
        }
    }

    function sendAiMessage() {
        if (isAiThinking) return;
        
        const input = document.getElementById('aiMessageInput');
        const message = input.value.trim();
        if (!message) return;
        
        const messagesDiv = document.getElementById('aiChatMessages');
        messagesDiv.innerHTML += `
            <div class="user-message">
                <strong>我:</strong> ${message}
            </div>
        `;
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
        
        // 显示思考中动画
        isAiThinking = true;
        const thinkingDiv = document.createElement('div');
        thinkingDiv.className = 'ai-message thinking';
        thinkingDiv.innerHTML = '<strong>AI:</strong> <div class="markdown-body">思考中...</div>';
        messagesDiv.appendChild(thinkingDiv);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
        
        fetch('/api/ai/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ message: message })
        })
        .then(response => response.json())
        .then(data => {
            // 移除思考中动画
            thinkingDiv.remove();
            isAiThinking = false;
            
            if (data.success) {
                messagesDiv.innerHTML += `
                    <div class="ai-message">
                        <strong>AI:</strong>
                        <div class="markdown-body">
                            ${data.response}
                        </div>
                    </div>
                `;
            } else {
                alert(data.message);
            }
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
            
            // 高亮代码块
            document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightBlock(block);
            });
        })
        .catch(error => {
            // 移除思考中动画
            thinkingDiv.remove();
            isAiThinking = false;
            
            console.error('Error:', error);
            alert('请求失败，请重试');
        });
        
        input.value = '';
    }
    </script>
</body>
</html>